<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="单据号" v-model="listQuery.receiptsNumber"></el-input>
      <!--<div style="width: 150px!important;margin-left: 20px;" class="filter-item">-->
        <!--<el-select v-model="listQuery.type" placeholder="端口">-->
          <!--<el-option-->
            <!--v-for="item in activityList"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</div>-->
      <!--<div style="width: 150px!important;margin-left: 20px;" class="filter-item">-->
        <!--<el-select v-model="listQuery.type" placeholder="状态">-->
          <!--<el-option-->
            <!--v-for="item in activityList"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</div>-->
      <el-button class="filter-item" style="margin-left: 20px;margin-right: 20px;" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button style="display: block;margin-left: 0px;" type="success" @click="handleAdd">新增应收单据<i class="el-icon-plus el-icon--right"></i></el-button>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 99%">

      <el-table-column align="center" label="端口">
        <template slot-scope="scope">
          <span>{{scope.row.source === '1' ? 'app' : 'PC商城'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="单据号">
        <template slot-scope="scope">
          <span>{{scope.row.receiptsNumber}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="收支类型">
        <template slot-scope="scope">
          <span>{{scope.row.receiptsType === '1' ? '线上' : '线下'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="买家昵称">
        <template slot-scope="scope">
          <span>{{scope.row.memberName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="金额">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="币种">
        <template slot-scope="scope">
          <span>{{scope.row.priceUnit}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="状态">
        <template slot-scope="scope">
          <el-tag>{{(!scope.row.invoiceStatus || scope.row.invoiceStatus === '0') ? '未开票' : '已开票'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleCheckDetail(scope.row)">查看</el-button>
          <el-button size="small" type="danger" @click="deletes(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!--弹窗-->
    <el-dialog title="详情" :visible.sync="dialogShow">
      <el-form label-width="140px">
        <div class="title">单据信息</div>
        <el-form-item class="half" label="单据编号">
          <span>{{receiptDetail.receiptsNumber}}</span>
        </el-form-item>

        <el-form-item class="half" label="订单编号">
          <span>{{receiptDetail.orderNumber}}</span>
        </el-form-item>

        <el-form-item label="流水号">
          <span v-if="receiptDetail.tradeNumber">{{receiptDetail.tradeNumber}}</span>
          <el-input v-if="!receiptDetail.tradeNumber" style="width: 340px!important;" v-model="tradeNumber" placeholder="流水号"></el-input>
          <el-button v-if="!receiptDetail.tradeNumber" size="small" type="success" style="margin-left: 20px" @click="addTradeNumber">确定</el-button>
        </el-form-item>

        <el-form-item class="half" label="会员账号">
          <span>{{receiptDetail.memberAccount}}</span>
        </el-form-item>

        <el-form-item class="half" label="会员昵称">
          <span>{{receiptDetail.memberName}}</span>
        </el-form-item>

        <el-form-item class="half" label="下单时间">
          <span>{{receiptDetail.orderTime}}</span>
        </el-form-item>

        <el-form-item class="half" label="付款时间">
          <span>{{receiptDetail.payTime}}</span>
        </el-form-item>

        <el-form-item class="half" label="订单金额">
          <span>{{receiptDetail.price}}&nbsp;{{receiptDetail.priceUnit}}</span>
        </el-form-item>

        <el-form-item class="half" label="付款方式">
          <span>{{receiptDetail.memberName}}</span>
        </el-form-item>

        <el-form-item label="说明">
          <span>{{receiptDetail.remark ? receiptDetail.remark : '无'}}</span>
        </el-form-item>

        <div class="title">发票信息</div>

        <el-form-item v-if="invoiceDetail" class="half" label="发票类型">
          <span>{{invoiceDetail.invoiceType === '1' ? '电子发票' : '纸质发票'}}</span>
        </el-form-item>

        <el-form-item v-if="invoiceDetail" class="half" label="发票抬头">
          <span>{{invoiceDetail.invoiceRise}}</span>
        </el-form-item>

        <el-form-item v-if="invoiceDetail" class="half" label="税号">
          <span>{{invoiceDetail.taxpayerIdentityNumber}}</span>
        </el-form-item>

        <el-form-item v-if="invoiceDetail" class="half" label="电子邮件">
          <span>{{invoiceDetail.email}}</span>
        </el-form-item>

        <el-form-item v-if="invoiceDetail" label="开户行及银行账号">
          <span>{{invoiceDetail.bankAndAccount}}</span>
        </el-form-item>

        <el-form-item v-if="invoiceDetail" label="备注">
          <span>{{invoiceDetail.remark ? invoiceDetail.remark : '无'}}</span>
        </el-form-item>
        <el-button v-if="invoiceDetail" style="display: block;margin-bottom: 20px" @click="showTicket">{{invoiceDetail.invoiceStatus === '0' ? '未开票' : '已开票'}}</el-button>
        <div v-if="invoiceDetail" v-show="ticketShow">
          <div class="title">开票信息</div>
          <el-form-item label="发票号码">
            <!--<span>{{invoiceDetail.invoiceNumber}}</span>-->
            <el-input style="width: 300px!important;" v-model="invoiceDetail.invoiceNumber" placeholder="发票号码"></el-input>
          </el-form-item>

          <el-form-item label="开票日期">
            <!--<span>{{invoiceDetail.invoiceTime}}</span>-->
            <el-date-picker
              v-model="invoiceDetail.invoiceTime"
              style="width: 300px!important;"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
            <!--<el-input style="width: 300px!important;" v-model="invoiceDetail.invoiceTime" placeholder="流水号"></el-input>-->
          </el-form-item>

          <el-form-item label="开票人">
            <!--<span>{{invoiceDetail.drawerName}}</span>-->
            <el-input style="width: 300px!important;" v-model="invoiceDetail.drawerName" placeholder="开票人"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="success" @click="submitInvoice">提 交</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
      </div>
    </el-dialog>

    <!--添加线下单据-->
    <el-dialog title="新增线下单据" :visible.sync="addDialogShow">
      <el-form :model="form" ref="form" :rules="rules" label-width="140px">
        <div class="title">商品信息</div>
        <el-form-item class="half" label="线下订单编号" prop="record.orderNumber">
          <el-input style="width: 300px!important;" v-model="form.record.orderNumber" placeholder="线下订单编号"></el-input>
        </el-form-item>

        <el-form-item class="half" label="总金额" prop="record.price">
          <el-input style="width: 200px!important;" v-model="form.record.price" placeholder="总金额"></el-input>&nbsp;&nbsp;RMB
        </el-form-item>

        <el-form-item class="half" label="商品名称" prop="goods.name">
          <el-input style="width: 300px!important;" v-model="form.goods.name" placeholder="商品名称"></el-input>
        </el-form-item>

        <el-form-item class="half" label="单价" prop="goods.price">
          <el-input style="width: 200px!important;" v-model="form.goods.price" placeholder="单价"></el-input>&nbsp;&nbsp;RMB
        </el-form-item>

        <el-form-item class="half" label="数量" prop="goods.number">
          <el-input style="width: 300px!important;" v-model="form.goods.number" placeholder="数量"></el-input>
        </el-form-item>

        <el-form-item class="half" label="商品数量单位" prop="goods.numberUnit">
          <el-input style="width: 300px!important;" v-model="form.goods.numberUnit" placeholder="商品数量单位"></el-input>
        </el-form-item>

        <el-form-item class="half" label="下单时间" prop="record.orderTime">
          <el-date-picker
            style="width: 300px!important;"
            v-model="form.record.orderTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择下单时间">
          </el-date-picker>
        </el-form-item>

        <div class="title">单据信息</div>

        <el-form-item class="half" label="单据号">
          <span>提交后自动生成</span>
        </el-form-item>

        <el-form-item class="half" label="流水号" prop="record.tradeNumber">
          <el-input style="width: 300px!important;" v-model="form.record.tradeNumber" placeholder="流水号"></el-input>
        </el-form-item>

        <el-form-item class="half" label="付款方式" prop="record.payType">
          <el-select v-model="form.record.payType" placeholder="请选择" style="width: 300px!important;">
            <el-option
              v-for="item in payType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="half" label="付款时间" prop="record.payTime">
          <el-date-picker
            style="width: 300px!important;"
            v-model="form.record.payTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择付款时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item class="half" label="会员账号" prop="record.memberAccount">
          <el-input style="width: 300px!important;" v-model="form.record.memberAccount" placeholder="会员账号"></el-input>
        </el-form-item>

        <el-form-item class="half" label="会员昵称" prop="record.memberName">
          <el-input style="width: 300px!important;" v-model="form.record.memberName" placeholder="会员昵称"></el-input>
        </el-form-item>

        <el-form-item label="说明">
          <el-input style="width: 754px;" v-model="form.record.remark" placeholder="说明"></el-input>
        </el-form-item>

        <div class="title">开票信息</div>

        <el-form-item class="half" label="开票状态">
          <el-radio-group v-model="form.invoice.invoiceStatus">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item class="half" label="发票类型">
          <el-radio-group v-model="form.invoice.invoiceType">
            <el-radio label="1">电子</el-radio>
            <el-radio label="2">纸质</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item class="half" label="发票抬头" prop="invoice.invoiceRise">
          <el-input style="width: 300px!important;" v-model="form.invoice.invoiceRise" placeholder="发票抬头"></el-input>
        </el-form-item>

        <el-form-item class="half" label="税号" prop="invoice.taxpayerIdentityNumber">
          <el-input style="width: 300px!important;" v-model="form.invoice.taxpayerIdentityNumber" placeholder="税号"></el-input>
        </el-form-item>

        <el-form-item class="half" label="电子邮箱" prop="invoice.eamil">
          <el-input style="width: 300px!important;" v-model="form.invoice.eamil" placeholder="电子邮箱"></el-input>
        </el-form-item>

        <el-form-item label="开户行及银行账号" prop="invoice.bankAndAccount">
          <el-input style="width: 754px!important;" v-model="form.invoice.bankAndAccount" placeholder="开户行及银行账号"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input style="width: 754px!important;" v-model="form.invoice.remark" placeholder="备注"></el-input>
        </el-form-item>

        <div class="title">发票信息</div>

        <el-form-item class="half" label="发票号码" prop="invoice.invoiceNumber">
          <el-input style="width: 300px!important;" v-model="form.invoice.invoiceNumber" placeholder="发票号码"></el-input>
        </el-form-item>

        <el-form-item class="half" label="开票日期" prop="invoice.invoiceTime">
          <el-date-picker
            v-model="form.invoice.invoiceTime"
            style="width: 300px!important;"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item class="half" label="开票人" prop="invoice.drawerName">
          <el-input style="width: 300px!important;" v-model="form.invoice.drawerName" placeholder="开票人"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
        <el-button type="primary" @click="update('form')">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryFinanceList, queryFinanceDetail, submitTradeNumber, editInvoiceInfo, submitReceiptRecord, deleteReceiptRecord } from '@/api/order'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import { mapGetters } from 'vuex'

  export default {
    name: 'finance_detail',
    directives: {
      waves
    },
    data() {
      return {
        dialogShow: false, // 详情
        addDialogShow: false, // 新增
        loading: false,
        payType: [
          {
            value: '1',
            label: '线上（微信）'
          },
          {
            value: '2',
            label: '线下'
          }
        ], // 支付类型
        list: null, // 列表数据
        total: null, // 总条数
        listLoading: true, // loading
        listQuery: { // 请求参数
          pageNo: 1,
          pageSize: 10,
          receiptsNumber: ''
        },
        form: {
          record: {
            priceUnit: 'RMB'
          },
          invoice: {
            invoiceStatus: '0',
            invoiceType: '1'
          },
          goods: {
            priceUnit: 'RMB'
          }
        },
        rules: {
          'record.orderNumber': [
            {
              required: true,
              message: '请输入订单编号',
              trigger: 'blur'
            }
          ],
          'record.price': [
            {
              required: true,
              message: '请输入总金额',
              trigger: 'blur'
            }
          ],
          'goods.name': [
            {
              required: true,
              message: '请输入商品名称',
              trigger: 'blur'
            }
          ],
          'goods.price': [
            {
              required: true,
              message: '请输入单价',
              trigger: 'blur'
            }
          ],
          'goods.number': [
            {
              required: true,
              message: '请输入数量',
              trigger: 'blur'
            }
          ],
          'goods.numberUnit': [
            {
              required: true,
              message: '请输入商品数量单位',
              trigger: 'blur'
            }
          ],
          'record.orderTime': [
            {
              required: true,
              message: '请选择下单时间',
              trigger: 'blur'
            }
          ],
          'record.tradeNumber': [
            {
              required: true,
              message: '请输入流水号',
              trigger: 'blur'
            }
          ],
          'record.payType': [
            {
              required: true,
              message: '请选择付款方式',
              trigger: 'blur'
            }
          ],
          'record.payTime': [
            {
              required: true,
              message: '请选择付款时间',
              trigger: 'blur'
            }
          ],
          'record.memberAccount': [
            {
              required: true,
              message: '请输入会员账号',
              trigger: 'blur'
            }
          ],
          'record.memberName': [
            {
              required: true,
              message: '请输入会员名称',
              trigger: 'blur'
            }
          ],
          'invoice.invoiceRise': [
            {
              required: true,
              message: '请输入发票抬头',
              trigger: 'blur'
            }
          ],
          'invoice.taxpayerIdentityNumber': [
            {
              required: true,
              message: '请输入税号',
              trigger: 'blur'
            }
          ],
          'invoice.eamil': [
            {
              required: true,
              message: '请输入电子邮箱',
              trigger: 'blur'
            }
          ],
          'invoice.bankAndAccount': [
            {
              required: true,
              message: '请输入开户行及银行账号',
              trigger: 'blur'
            }
          ],
          'invoice.invoiceNumber': [
            {
              required: true,
              message: '请输入发票号码',
              trigger: 'blur'
            }
          ],
          'invoice.invoiceTime': [
            {
              required: true,
              message: '请选择开票日期',
              trigger: 'blur'
            }
          ],
          'invoice.drawerName': [
            {
              required: true,
              message: '请输入开票人',
              trigger: 'blur'
            }
          ]
        },
        receiptDetail: {}, // 单据详情
        invoiceDetail: {}, // 发票详情
        tradeNumber: '', // 流水号
        invoiceForm: {
          invoiceNumber: '',
          invoiceTime: '',
          drawerName: ''
        },
        ticketShow: false,
        tableKey: 0
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: '待审批',
          1: '审批通过',
          2: '审批不通过'
        }
        return statusMap[status]
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleAdd() {
        this.addDialogShow = true
      },
      getList() {
        this.listLoading = true;
        queryFinanceList(this.listQuery).then(response => {
          this.list = response.data.data.records
          this.total = response.data.data.total
          this.listLoading = false
        });
      },
      handleFilter() { // 搜索
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleSizeChange(val) { // 页面大小切换
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) { // 页码切换
        this.listQuery.pageNo = val
        this.getList()
      },
      handleCheckDetail(row) { // 查看详情
        queryFinanceDetail(row.id).then(response => {
          this.receiptDetail = response.data.data.receiptsRecord
          this.invoiceDetail = response.data.data.receiptsInvoice
          this.dialogShow = true
        })
      },
      closeDialog() {
        this.dialogShow = false
        this.addDialogShow = false
      },
      cancel(formName) { // 取消
        this.$refs[formName].resetFields()
      },
      update(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = this.form
            submitReceiptRecord(params).then(response => {
              if (response.data.code === '0') {
                this.$message.success('添加成功')
                this.cancel('form')
                this.closeDialog()
                this.getList()
              }
            })
          }
        })
      },
      deletes(row) {
        this.$confirm(
          '此操作将永久删除, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          deleteReceiptRecord(row.id).then(res => {
            this.$message.success('删除成功')
            this.getList()
          })
        })
      },
      addTradeNumber() { // 添加流水号
        if (!this.tradeNumber) {
          return
        }
        const params = {
          id: this.receiptDetail.id,
          tradeNumber: this.tradeNumber
        }
        submitTradeNumber(params).then(response => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.receiptDetail.tradeNumber = this.tradeNumber
        })
      },
      showTicket() { // 显示开票信息
        this.ticketShow = !this.ticketShow
      },
      submitInvoice() {
        if (this.invoiceDetail.invoiceNumber && this.invoiceDetail.invoiceTime && this.invoiceDetail.drawerName) {
          const params = {
            id: this.invoiceDetail.id,
            invoiceNumber: this.invoiceDetail.invoiceNumber,
            invoiceTime: this.invoiceDetail.invoiceTime,
            drawerName: this.invoiceDetail.drawerName
          }
          editInvoiceInfo(params).then(response => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          })
        } else {
          this.$message.error('开票信息不完整')
        }
      }
    }
  }
</script>

<style scoped>
  .line-word {
    padding: 0 15px;
  }
  .image {
    display: inline-block;
    width: 150px;
    margin-right: 30px;
  }
  .select-width {
    width: 150px!important;
  }
  .title{
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
  }
  .half {
    display: inline-block;
    width: 49%!important;
  }
</style>
